import React, { Component } from 'react';
import {nanoid} from 'nanoid';
import PropTypes from 'prop-types';
import './index.css';

class Header extends Component {
    // 对接受的props进行类型, 必要性的限制
    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }

    handleEnter = (e) => {
        const {key, target} = e;
        if (key !== 'Enter') return;
        // trim()去空格
        if (target.value.trim() === '') {
            alert('输入不能为空');
            return;
        }
        const todoObj = {
            // 用nanoid库获取一个唯一标识
            id: nanoid(),
            name: target.value,
            done: false
        }
        this.props.addTodo(todoObj);
        target.value = '';
    }
    render() {
        return (
            <div className='todo-header'>
                <input onKeyUp={this.handleEnter} type="text" placeholder='请输入你的任务名称，按回车键确认'/>
            </div>
        );
    }
}

export default Header;